<template>
  <div
    v-if="querySchemas.length || slots.handle"
    class="topper"
    :style="{ padding: `0px ${paddingX}` }"
  >
    <n-form inline label-placement="left" :show-feedback="false">
      <template v-for="schema in topperSchemas" :key="schema.field">
        <n-form-item :label="schema.label" :show-label="Boolean(schema.label)">
          <template v-if="'AsyncSelect' === schema.component">
            <AsyncSelect v-bind="schema.componentProps" v-model:value="queryItems[schema.field]" />
          </template>
          <template v-else-if="['NDatePicker', 'NTimePicker'].includes(schema.component)">
            <component
              :is="naive[schema.component]"
              v-bind="schema.componentProps"
              v-model:formatted-value="queryItems[schema.field]"
            />
          </template>
          <template v-else-if="'NInput' === schema.component">
            <component
              :is="naive[schema.component]"
              v-bind="{ clearable: true, ...schema.componentProps }"
              v-model:value="queryItems[schema.field]"
            >
              <template #suffix>
                <i class="iconfont icon-sousuo"></i>
              </template>
            </component>
          </template>
          <template v-else-if="'SelectInput' === schema.component">
            <SelectInput v-model:value="queryItems[schema.field]" />
          </template>
          <component
            :is="naive[schema.component]"
            v-else
            v-bind="schema.componentProps"
            v-model:value="queryItems[schema.field]"
          />
        </n-form-item>
      </template>
      <template v-if="querySchemas.length">
        <n-form-item>
          <n-flex :size="8">
            <n-tooltip v-if="drawerSchemas.length" trigger="hover">
              <template #trigger>
                <n-button class="logo-button" ghost @click="drawerShow = true">
                  <i class="iconfont icon-shaixuan text-14" />
                </n-button>
              </template>
              更多筛选
            </n-tooltip>
            <n-button
              class="query-button"
              attr-type="submit"
              type="primary"
              @click="() => emits('search')"
            >
              查询
            </n-button>
            <n-tooltip trigger="hover">
              <template #trigger>
                <n-button class="logo-button" ghost @click="() => emits('reset')">
                  <i class="iconfont icon-zhongzhi-shuaxin text-14" />
                </n-button>
              </template>
              重置刷新
            </n-tooltip>
          </n-flex>
        </n-form-item>
      </template>
    </n-form>
    <div class="handle max-w-470 flex flex-shrink-0 flex-wrap gap-8">
      <slot name="handle"></slot>
    </div>
  </div>
  <n-drawer v-model:show="drawerShow" :width="400">
    <n-drawer-content title="筛选" closable>
      <n-form label-placement="top" :show-feedback="false">
        <template v-for="schema in drawerSchemas" :key="schema.field">
          <n-form-item :label="schema.label" :show-label="Boolean(schema.label)">
            <template v-if="'AsyncSelect' === schema.component">
              <AsyncSelect
                v-bind="schema.componentProps"
                v-model:value="queryItems[schema.field]"
              />
            </template>
            <template v-else-if="['NDatePicker', 'NTimePicker'].includes(schema.component)">
              <component
                :is="naive[schema.component]"
                v-bind="schema.componentProps"
                v-model:formatted-value="queryItems[schema.field]"
              />
            </template>
            <template v-else-if="'NInput' === schema.component">
              <component
                :is="naive[schema.component]"
                v-bind="{ clearable: true, ...schema.componentProps }"
                v-model:value="queryItems[schema.field]"
              >
                <template #suffix>
                  <i class="iconfont icon-sousuo"></i>
                </template>
              </component>
            </template>
            <template v-else-if="'SelectInput' === schema.component">
              <SelectInput v-model:value="queryItems[schema.field]" />
            </template>
            <component
              :is="naive[schema.component]"
              v-else
              v-bind="schema.componentProps"
              v-model:value="queryItems[schema.field]"
            />
          </n-form-item>
        </template>
      </n-form>
      <template #footer>
        <n-flex>
          <n-button @click="drawerShow = false">取消</n-button>
          <n-button type="primary" @click="handleConfirm">确定</n-button>
        </n-flex>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>
<script setup lang="jsx">
import * as naive from 'naive-ui'
import { useSchema } from '@/hooks/useSchema'
import { useAppStore } from '@/store'
defineOptions({ name: 'MyQueryForm' })
const props = defineProps({
  queryFormat: {
    type: Function,
    default: null,
  },
  querySchemas: {
    type: Array,
    default: () => [],
  },
  paddingX: {
    type: String,
    default: '0px',
  },
  gap: {
    type: Number,
    default: 8,
  },
})
const emits = defineEmits(['search', 'reset'])
const slots = useSlots()
const appStore = useAppStore()
const topperSchemas = computed(() =>
  props.querySchemas.filter((item) => !item.area || item.area === 'topper')
)
const drawerSchemas = computed(() => props.querySchemas.filter((item) => item?.area === 'drawer'))
// 对查询项表单的处理
const { queryItems, initQueryItems, getQueryParams } = useSchema(
  props.querySchemas,
  props.queryFormat
)

// 抽屉控制
const drawerShow = ref(false)
function handleConfirm() {
  drawerShow.value = false
  emits('search')
}
defineExpose({
  initQueryItems,
  getQueryParams,
})
const cssGap = computed(() => `${props.gap}px`)
</script>
<style lang="scss" scoped>
.topper {
  display: flex;
  flex-shrink: 0;
  gap: 40px;
  margin-bottom: 20px;
  justify-content: space-between;
}
:deep(.n-form) {
  .n-form-item {
    margin-bottom: 16px;
    --n-label-padding: 0 0 8px 0 !important;
  }
  &.n-form--inline {
    .n-form-item {
      margin-right: v-bind('cssGap');
      margin-bottom: 0px;
      --n-label-padding: 0 8px 0 0 !important;
      .n-form-item-label {
        padding-right: v-bind('cssGap');
      }
    }
  }
}
.logo-button {
  --n-width: 32px !important;
  --n-padding: 10px !important;
}
.query-button {
  --n-padding: 0 30px !important;
}
</style>
